<template>
  <global-layout @dynamicRouterShow="dynamicRouterShow">
    <!-- update-begin- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
    <contextmenu-curr :itemList="menuItemList" :visible.sync="menuVisibleCurr" style="z-index: 9999" @select="onMenuSelect" />
    <contextmenu :itemList="menuItemList" :target="target" :visible.sync="menuVisible" style="z-index: 9999" @select="onMenuSelect" />
    <!-- update-end- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
    <a-tabs
      @contextmenu.native="(e) => onContextmenu(e)"
      v-if="multipage"
      :active-key="activePage"
      class="tab-layout-tabs tab-layout-tabone"
      style="height: 46px"
      :hide-add="true"
      type="editable-card"
      @change="changePage"
      @tabClick="tabCallBack"
      @edit="editPage"
    >
      <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList">
        <span slot="tab" :ref="page.fullPath" :pagekey="page.fullPath">{{ page.meta.title }}</span>
      </a-tab-pane>
      <div slot="tabBarExtraContent" style="height: 40px; display: flex; align-items: center;">
        <a-button v-if="isHelp" @click="viewHelp" type="primary" icon="question">
          {{$t('帮助')}}
        </a-button>
        <a-icon type="unordered-list" style="font-size: 20px;margin-left: 10px" @click="(e)=>handleOpt(e, activePage)" />
      </div>
    </a-tabs>
    <div style="height: calc(100vh - 105px)">
      <transition name="page-toggle">
        <keep-alive v-if="multipage">
          <router-view v-if="reloadFlag" ref="loadData" />
        </keep-alive>
        <template v-else>
          <router-view v-if="reloadFlag" ref="loadData" />
        </template>
      </transition>
    </div>
    <data-hide-modal ref="modalForm"></data-hide-modal>
    <help-modal ref="modalHelp"></help-modal>
  </global-layout>
</template>

<script>
import Vue from 'vue'
import { TENANT_ID } from '@/store/mutation-types'
import { mixin, mixinDevice } from '@/utils/mixin.js'
import { triggerWindowResizeEvent } from '@/utils/util'
import { getAction } from '@/api/manage'
import GlobalLayout from '@/components/page/GlobalLayout'
import Contextmenu from '@/components/menu/Contextmenu'
import ContextmenuCurr from '@/components/menu/ContextmenuCurr'
import DataHideModal from '@/components/DataHideModal'
import HelpModal from '@/components/HelpModal'

export default {
  name: 'TabLayout',
  components: {
    GlobalLayout,
    Contextmenu,
    ContextmenuCurr,
    DataHideModal,
    HelpModal
  },
  mixins: [mixin, mixinDevice],
  data() {
    return {
      pageList: [],
      linkList: [],
      activePage: '',
      menuVisible: false,
      menuVisibleCurr: false,
      menuItemList: [
        { key: '4', icon: 'reload', text: this.$t('刷 新') },
        { key: '1', icon: 'arrow-left', text: this.$t('关闭左侧') },
        { key: '2', icon: 'arrow-right', text: this.$t('关闭右侧') },
        { key: '3', icon: 'close', text: this.$t('关闭其它') },
      ],
      reloadFlag: true,
      isHelp: false,
      target: ''
    }
  },
  /* update_begin author:wuxianquan date:20190828 for: 关闭当前tab页，供子页面调用 ->望菜单能配置外链，直接弹出新页面而不是嵌入iframe #428 */
  provide() {
    return {
      closeCurrent: this.closeCurrent,
    }
  },
  /* update_end author:wuxianquan date:20190828 for: 关闭当前tab页，供子页面调用->望菜单能配置外链，直接弹出新页面而不是嵌入iframe #428 */
  computed: {
    multipage() {
      //判断如果是手机模式，自动切换为单页面模式
      if (this.isMobile()) {
        return false
      } else {
        return this.$store.state.app.multipage
      }
    },
  },
  created() {
    this.pageList.push(this.$route)
    this.linkList.push(this.$route.fullPath)
    this.activePage = this.$route.fullPath
  },
  mounted(){
    let that=this
    document.onkeydown = function(e) { 
      let key = window.event.keyCode; 
      if (key== 66 && event.ctrlKey && Vue.ls.get(TENANT_ID)) {
        window.event.preventDefault()
        that.$refs.modalForm.show()
      }
      if (key == 75 && event.ctrlKey) {
        window.event.preventDefault()
        that.isHideData = false
        if(that.$refs.loadData.customInit){
          that.$refs.loadData.customInit(false)
        }
      }
    }
  },
  watch: {
    $route: function (newRoute) {
      this.activePage = newRoute.fullPath
      if (!this.multipage) {
        this.linkList = [newRoute.fullPath]
        this.pageList = [Object.assign({}, newRoute)]
      } else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
        this.linkList.push(newRoute.fullPath)
        this.pageList.push(Object.assign({}, newRoute))
      } else if (this.linkList.indexOf(newRoute.fullPath) >= 0) {
        let oldIndex = this.linkList.indexOf(newRoute.fullPath)
        let oldPositionRoute = this.pageList[oldIndex]
        this.pageList.splice(oldIndex, 1, Object.assign({}, newRoute, { meta: oldPositionRoute.meta }))
      }
    },
    activePage: function (key) {
      this.showHbtn(key)
      let index = this.linkList.lastIndexOf(key)
      let waitRouter = this.pageList[index]
      this.$router.push(Object.assign({}, waitRouter))
      this.changeTitle(waitRouter.meta.title)
    },
    multipage: function (newVal) {
      if (this.reloadFlag) {
        if (!newVal) {
          this.linkList = [this.$route.fullPath]
          this.pageList = [this.$route]
        }
      }
    },
  },
  methods: {
    showHbtn(key){
      this.isHelp = false
      getAction('/system/menu/helpList',{url:key}).then(res=>{
        if(res.success && res.result.length > 0){
          this.isHelp = true
        }else{
          this.isHelp = false
        }
      })
    },
    viewHelp(){
      this.$refs.modalHelp.show(this.activePage)
    },
    changePage(key) {
      this.activePage = key
    },
    tabCallBack() {
      this.$nextTick(() => {
        triggerWindowResizeEvent()
      })
    },
    editPage(key, action) {
      this[action](key)
    },
    remove(key) {
      if (this.pageList.length === 1) {
        this.$message.warning('这是最后一页，不能再关闭了啦')
        return
      }
      this.pageList = this.pageList.filter((item) => item.fullPath !== key)
      let index = this.linkList.indexOf(key)
      this.linkList = this.linkList.filter((item) => item !== key)
      index = index >= this.linkList.length ? this.linkList.length - 1 : index
      this.activePage = this.linkList[index]
      //this.$store.dispatch('setClosePage', {[key]: true})
    },
    onContextmenu(e) {
      const pagekey = this.getPageKey(e.target)
      if (pagekey !== null) {
        e.preventDefault()
        this.menuVisibleCurr = true
      }
    },
    getPageKey(target, depth) {
      depth = depth || 0
      if (depth > 2) {
        return null
      }
      let pageKey = target.getAttribute('pagekey')
      pageKey =
        pageKey || (target.previousElementSibling ? target.previousElementSibling.getAttribute('pagekey') : null)
      return pageKey || (target.firstElementChild ? this.getPageKey(target.firstElementChild, ++depth) : null)
    },
    onMenuSelect(key, target,arg) {
      let pageKey;
      if(arg == 'curr'){
        pageKey = this.getPageKey(target)
      }else{
        pageKey = target
      }
      switch (key) {
        case '1':
          this.closeLeft(pageKey)
          break
        case '2':
          this.closeRight(pageKey)
          break
        case '3':
          this.closeOthers(pageKey)
          break
        case '4':
          this.routeReload()
          break
        default:
          break
      }
    },
    /* update_begin author:wuxianquan date:20190828 for: 关闭当前tab页，供子页面调用->望菜单能配置外链，直接弹出新页面而不是嵌入iframe #428 */
    closeCurrent() {
      this.remove(this.activePage)
    },
    /* update_end author:wuxianquan date:20190828 for: 关闭当前tab页，供子页面调用->望菜单能配置外链，直接弹出新页面而不是嵌入iframe #428 */
    closeOthers(pageKey) {
      let index = this.linkList.indexOf(pageKey)
      this.linkList = this.linkList.slice(index, index + 1)
      this.pageList = this.pageList.slice(index, index + 1)
      this.activePage = this.linkList[0]
    },
    closeLeft(pageKey) {
      let tempList = [...this.pageList]
      let index = this.linkList.indexOf(pageKey)
      this.linkList = this.linkList.slice(index)
      this.pageList = this.pageList.slice(index)
      this.activePage = this.linkList[0]
    },
    closeRight(pageKey) {
      let index = this.linkList.indexOf(pageKey)
      this.linkList = this.linkList.slice(0, index + 1)
      this.pageList = this.pageList.slice(0, index + 1)
      this.activePage = this.linkList[this.linkList.length - 1]
    },
    dynamicRouterShow(key, title) {
      let keyIndex = this.linkList.indexOf(key)
      if (keyIndex >= 0) {
        let currRouter = this.pageList[keyIndex]
        let meta = Object.assign({}, currRouter.meta, { title: title })
        this.pageList.splice(keyIndex, 1, Object.assign({}, currRouter, { meta: meta }))
        if (key === this.activePage) {
          this.changeTitle(title)
        }
      }
    },
    routeReload() {
      this.reloadFlag = false
      let ToggleMultipage = 'ToggleMultipage'
      this.$store.dispatch(ToggleMultipage, false)
      this.$nextTick(() => {
        this.$store.dispatch(ToggleMultipage, true)
        this.reloadFlag = true
      })
    },
    changeTitle(title) {
      let projectTitle = this.$t('游乐场地营销专家系统')
      // 首页特殊处理
      if (this.$route.path === this.activePage) {
        document.title = projectTitle
      } else {
        document.title = title + ' · ' + projectTitle
      }
    },
    handleOpt(e, activePage){
      this.target = activePage
      if (activePage !== null) {
        e.preventDefault()
        this.menuVisible = true
      }
    }
  },
}
</script>

<style lang="less">
/*
 * The following styles are auto-applied to elements with
 * transition="page-transition" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the page transition by editing
 * these styles.
 */

.page-transition-enter {
  opacity: 0;
}

.page-transition-leave-active {
  opacity: 0;
}

.page-transition-enter .page-transition-container,
.page-transition-leave-active .page-transition-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/*美化弹出Tab样式*/
.ant-tabs-nav-container {
  margin-top: 4px;
}

/* 修改 ant-tabs 样式 */
.tab-layout-tabs.ant-tabs {
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  background-color: white;
  padding: 0 20px;

  .ant-tabs-bar {
    margin: 4px 0 0;
    border: none;
  }
}

.tab-layout-tabs.ant-tabs {
  &.ant-tabs-card .ant-tabs-tab {
    padding: 0 24px !important;
    background-color: white !important;
    margin-right: 10px !important;

    .ant-tabs-close-x {
      width: 12px !important;
      height: 12px !important;
      opacity: 0 !important;
      cursor: pointer !important;
      font-size: 12px !important;
      margin: 0 !important;
      position: absolute;
      top: 36%;
      right: 6px;
    }

    &:hover .ant-tabs-close-x {
      opacity: 1 !important;
    }
  }
}

.tab-layout-tabs.ant-tabs.ant-tabs-card > .ant-tabs-bar {
  .ant-tabs-tab {
    border: none !important;
    border-bottom: 1px solid transparent !important;
  }
  .ant-tabs-tab-active {
    border-color: @primary-color!important;
  }
}
</style>